import { useRoutes, Navigate } from "react-router-dom"
import NotFound from "../components/404";
import Login from "../components/Login";
import Main from "../components/Main";
import Home from "../components/Main/Home"
import About from "../components/Main/About"
import Music from "../components/Main/Home/Music";
import News from "../components/Main/Home/News";

const routes = [
  {
    path: "/login",
    element: <Login />
  },
  {
    path: "/main",
    element: <Main />,
    children: [
      {
        path: "/main/about",
        element: <About />
      },
      {
        path: "/main/home",
        element: <Home />,
        children: [
          {
            path: "/main/home/music",
            element: <Music />
          },
          {
            path: "/main/home/news",
            element: <News />
          },
        ]
      },
    ]
  },
  {
    path: "/",
    element: <Navigate to="/login" />
  },
  {
    path: "*",
    element: <NotFound />
  },
]

export default routes

export const GetRoutes = () => {
  return useRoutes(routes)
}

export const useMyRoutes = () => {
  return useRoutes(routes)
}